<template>
  <div>
    <el-form-item label-width="40">
      <draggable tag="ul" :list="localData.tabs" :group="{ name: 'tabs', pull: false, put: false }" ghost-class="ghost" handle=".drag-item">
        <template #item="{ element, index }">
          <li>
            <el-icon class="el-icon drag-item" style="font-size: 16px; margin: 0 5px; cursor: move"><Operation /></el-icon>
            <el-input v-model="element.label" placeholder="标签标题" style="margin-right: 5px" />
            <el-input v-model="element.name" placeholder="标签标识" style="margin-right: 5px" />
            <el-checkbox v-model="element.lazy">懒加载</el-checkbox>
            <el-button style="margin-left: 4px" @click="handleRemoveFields(index)" circle plain type="danger" size="small" icon="el-icon-minus" />
          </li>
        </template>
      </draggable>
      <el-button type="primary" link @click="handleAddFields()">添加标签 </el-button>
    </el-form-item>
    <el-form-item label="风格">
      <el-radio-group v-model="localData.styleType">
        <el-radio-button label="默认" value="-" />
        <el-radio-button label="卡片" value="card" />
        <el-radio-button label="边框卡片" value="border-card" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="标签位置">
      <el-radio-group v-model="localData.tabPosition">
        <el-radio-button label="上" value="top" />
        <el-radio-button label="下" value="bottom" />
        <el-radio-button label="左" value="left" />
        <el-radio-button label="右" value="right" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="可关闭">
      <el-switch v-model="localData.closable" />
    </el-form-item>
  </div>
</template>
  
  <script>
import Draggable from 'vuedraggable';
export default {
  name: 'AnvilTabsConfig',
  components: { Draggable },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      localData: {}
    };
  },
  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          this.localData = newVal;
        }
      },
      deep: true,
      immediate: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal);
      },
      deep: true
    }
  },
  methods: {
    handleRemoveFields(index) {
      this.localData.tabs.splice(index, 1);
    },
    handleAddFields() {
      this.localData.tabs.push({
        label: '默认标签',
        name: '默认标识',
        labelPosition: 'right',
        labelSuffix: '：',
        labelWidth: 120,
        gutter: 0,
        menuBtn: false,
        menuPosition: 'center',
        group: [],
        column: []
      });
    }
  }
};
</script>
  